'use strict';

import React from 'react';
import { connect } from 'react-redux';
import { DragDropContext } from 'react-dnd';
import HTML5Backend from 'react-dnd-html5-backend';
import * as actions from '../../actions/index';
import { Button, Feedback } from 'qnui';
import Navigation,{Item, Group} from 'qnui/lib/navigation';
import { Row, Col } from 'qnui/lib/grid';
import * as TOOL from "./../TOOL/index";
import MobileModel from '../MobileModel/index';
import ShowToolForm from '../ShowToolForm/index';
import './index.scss';

class Body extends React.Component {
  constructor(props) {
    super(props);	
	this.handleResize = this.handleResize.bind(this);
    this.state = {
	  toolNavHeight:0
    };
  }

  handleResize() {
	let windowHeight = document.documentElement.clientHeight;
    this.setState({toolNavHeight:windowHeight-62});
  };
  componentDidMount(){
	window.addEventListener('resize', this.handleResize);
	let height = document.documentElement.clientHeight;
	this.setState({toolNavHeight: height-62});
  }
  render() {
    return (
		<Row justify="space-between">
            <Col fixedSpan="14">
				<Navigation
				  ref='toolNav'
				  type="tree"
				  activeDirection="right"
				  style={{margin:"0",overflow:"auto",height:this.state.toolNavHeight}}
				  >
				  <Item
					  itemid="1"
					  text="基础模块"
					  icon="category"
					  >
					  <Navigation style={{width:"248px",margin:"0 auto"}}>
						   <TOOL.ToolShopTitle dataSource={this.props.dataSource} toolTitle="店标"  dispatch={this.props.dispatch}></TOOL.ToolShopTitle>
						   <TOOL.ToolSingleImage dataSource={this.props.dataSource} toolTitle="单列图片"  dispatch={this.props.dispatch}></TOOL.ToolSingleImage>
						   <TOOL.ToolDoubleImages dataSource={this.props.dataSource} toolTitle="双列图片"  dispatch={this.props.dispatch}></TOOL.ToolDoubleImages>
						   <TOOL.ToolTripleImages dataSource={this.props.dataSource} toolTitle="三列图片"  dispatch={this.props.dispatch}></TOOL.ToolTripleImages>
						   <TOOL.ToolImagesRool dataSource={this.props.dataSource} toolTitle="多图滚动"  dispatch={this.props.dispatch}></TOOL.ToolImagesRool>
						   <TOOL.ToolImagesPointer dataSource={this.props.dataSource} toolTitle="轮播图幻灯"  dispatch={this.props.dispatch}></TOOL.ToolImagesPointer>
						   <TOOL.ToolTitle dataSource={this.props.dataSource} toolTitle="标题" dispatch={this.props.dispatch}></TOOL.ToolTitle>
						   <TOOL.ToolText dataSource={this.props.dataSource} toolTitle="文本"  dispatch={this.props.dispatch}></TOOL.ToolText>
						   <TOOL.ToolTwoLines dataSource={this.props.dataSource} toolTitle="跑马灯"  dispatch={this.props.dispatch}></TOOL.ToolTwoLines>
						   <TOOL.ToolLine dataSource={this.props.dataSource} toolTitle="辅助线"  dispatch={this.props.dispatch}></TOOL.ToolLine>
						   <TOOL.ToolTabbar dataSource={this.props.dataSource} toolTitle="标签页"  dispatch={this.props.dispatch}></TOOL.ToolTabbar>
						   <TOOL.ToolStairs badge="New" dataSource={this.props.dataSource} toolTitle="楼层跳转"  dispatch={this.props.dispatch}></TOOL.ToolStairs>
					  </Navigation>
					  </Item>
				  <Item
					  itemid="2"
					  text="营销插件"
					  icon="store"
					  >
					  <Navigation style={{width:"248px",margin:"0 auto"}}>
						<TOOL.SaleToolCutPrice dataSource={this.props.dataSource} toolTitle="砍价"  dispatch={this.props.dispatch}></TOOL.SaleToolCutPrice>
						<TOOL.SaleToolSharePrice dataSource={this.props.dataSource} toolTitle="分享降价"  dispatch={this.props.dispatch}></TOOL.SaleToolSharePrice>
						<TOOL.SaleToolCollectPrice dataSource={this.props.dataSource} toolTitle="收藏降价"  dispatch={this.props.dispatch}></TOOL.SaleToolCollectPrice>
						<TOOL.SaleToolInventPrice dataSource={this.props.dataSource} toolTitle="拉客降价"  dispatch={this.props.dispatch}></TOOL.SaleToolInventPrice>
						<TOOL.SaleToolVipPrice dataSource={this.props.dataSource} toolTitle="老客户专享"  dispatch={this.props.dispatch}></TOOL.SaleToolVipPrice>
						<TOOL.SaleToolCartPrice dataSource={this.props.dataSource} toolTitle="购物车砍价"  dispatch={this.props.dispatch}></TOOL.SaleToolCartPrice>
						<TOOL.SaleToolGetMore dataSource={this.props.dataSource} toolTitle="加钱购"  dispatch={this.props.dispatch}></TOOL.SaleToolGetMore>
						<TOOL.SaleToolPickList dataSource={this.props.dataSource} toolTitle="自动凑单"  dispatch={this.props.dispatch}></TOOL.SaleToolPickList>
						<TOOL.SaleToolCoupon dataSource={this.props.dataSource} toolTitle="优惠券"  dispatch={this.props.dispatch}></TOOL.SaleToolCoupon>
						<TOOL.SaleToolCountDown dataSource={this.props.dataSource} toolTitle="倒计时"  dispatch={this.props.dispatch}></TOOL.SaleToolCountDown>
					  </Navigation>
					  </Item>
				  <Item
					  itemid="3"
					  text="抽奖插件"
					  icon="gifts"
					  >
					  <Navigation style={{width:"248px",margin:"0 auto"}}>
						<TOOL.LotterToolTimeLine dataSource={this.props.dataSource} toolTitle="时段抽奖"  dispatch={this.props.dispatch} />
						<TOOL.LotterToolProbability dataSource={this.props.dataSource} toolTitle="概率抽奖"  dispatch={this.props.dispatch} />
						<TOOL.LotterToolGroup dataSource={this.props.dataSource} toolTitle="分组抽奖"  dispatch={this.props.dispatch} />
						<TOOL.LotterToolMarkCode dataSource={this.props.dataSource} toolTitle="领取抽奖码"  dispatch={this.props.dispatch} />
						<TOOL.LotterToolOrder dataSource={this.props.dataSource} toolTitle="订单抽奖"  dispatch={this.props.dispatch} />
						<TOOL.LotterToolPassWord dataSource={this.props.dataSource} toolTitle="密码领奖"  dispatch={this.props.dispatch} />
						<TOOL.LotterToolWinnerList dataSource={this.props.dataSource} toolTitle="中奖名单"  dispatch={this.props.dispatch} />
						<TOOL.LotterToolAutoGiftting dataSource={this.props.dataSource} toolTitle="自动开奖器"  dispatch={this.props.dispatch} />
						<TOOL.LotterToolGiftList dataSource={this.props.dataSource} toolTitle="奖品列表"  dispatch={this.props.dispatch} />
					    <TOOL.LotterTool dataSource={this.props.dataSource} toolTitle="集字游戏"  dispatch={this.props.dispatch} />
					  </Navigation>
					  </Item>
				  <Item
					  itemid="4"
					  text="会员插件"
					  icon="account"
					  >
					  <Navigation style={{width:"248px",margin:"0 auto"}}>
						<TOOL.VipToolUserInfo dataSource={this.props.dataSource} toolTitle="会员页头"  dispatch={this.props.dispatch} />
						<TOOL.VipToolSignCalendar dataSource={this.props.dataSource} toolTitle="签到日历"  dispatch={this.props.dispatch} />
						<TOOL.VipToolSpecialized dataSource={this.props.dataSource} toolTitle="会员专属"  dispatch={this.props.dispatch} />
						<TOOL.VipToolJifenExchange dataSource={this.props.dataSource} toolTitle="积分兑换"  dispatch={this.props.dispatch} />
						<TOOL.VipToolShareExchange dataSource={this.props.dataSource} toolTitle="分享兑换"  dispatch={this.props.dispatch} />
					    <TOOL.VipToolTask dataSource={this.props.dataSource} toolTitle="会员任务"  dispatch={this.props.dispatch} />
					    <TOOL.VipToolResearch dataSource={this.props.dataSource} toolTitle="会员调查"  dispatch={this.props.dispatch} />
					    <TOOL.VipToolRemind dataSource={this.props.dataSource} toolTitle="定时提醒"  dispatch={this.props.dispatch} />
					  </Navigation>
					  </Item>
				  <Item
					  itemid="5"
					  text="小众插件"
					  icon="attachment"
					  >
					  <Navigation style={{width:"248px",margin:"0 auto"}}>
						<TOOL.SpecialToolSports dataSource={this.props.dataSource} toolTitle="体育竞猜"  dispatch={this.props.dispatch} />
						<TOOL.SpecialToolNews dataSource={this.props.dataSource} toolTitle="微淘头条"  dispatch={this.props.dispatch} />
						<TOOL.SpecialToolMusic dataSource={this.props.dataSource} toolTitle="音乐播放器"  dispatch={this.props.dispatch} />
					  </Navigation>
					  </Item>
				  <Item
					  itemid="6"
					  text="模板专用插件"
					  icon="form"
					  >
					  <Navigation  style={{width:"248px",margin:"0 auto"}}>
					  {
						this.props.private_components.map((comp_code,key)=>{
							switch(comp_code){
								case "countdown_prom_v1":
									return <TOOL.CountdownPromV1 key={key} toolTitle="折扣倒计时"  dataSource={this.props.dataSource} dispatch={this.props.dispatch} />;
								break;
								case "countdown_items_v1":
									return <TOOL.CountdownItemsV1 key={key} toolTitle="商品列表"  dataSource={this.props.dataSource} dispatch={this.props.dispatch} />;
								break;
							}
						})
					  }
					  </Navigation>
					  </Item>
			  </Navigation>
			</Col>
            <Col className="next-col-10" style={{margin:"0",overflowX:"hidden",overflowY:"auto",height:this.state.toolNavHeight,background:"#e5e7ea"}}>
				<MobileModel dataSource={this.props.dataSource} dispatch={this.props.dispatch} />
			</Col>
            <Col className="next-col-6" style={{border:"1px solid #EBEBEB",position:"relative"}}>
				<ShowToolForm height={this.state.toolNavHeight-60} dataSource={this.props.dataSource} component={this.props.component} dispatch={this.props.dispatch} />
			</Col>
        </Row>
    );
  }
}

export default DragDropContext(HTML5Backend)(Body);
